import React from "react";
import {Layout, Menu} from "antd";
import {withRouter} from "react-router-dom"
import './DrawerMenu.less'
import {AppstoreAddOutlined, HomeOutlined, PicCenterOutlined, ProjectOutlined, TeamOutlined} from "@ant-design/icons";

const IconMap = {
    AppstoreAdd: <AppstoreAddOutlined/>,
    home: <HomeOutlined/>,
    picCenter: <PicCenterOutlined/>,
    project: <ProjectOutlined/>,
    Team: <TeamOutlined/>
};

const {Header, Content, Footer, Sider} = Layout;
const {SubMenu} = Menu;

const MENUS = {
    home: {
        path: '/',
        key: 'home',
        title: '首页',
        icon: 'home'
    },
    user: {
        path: '/',
        key: 'user',
        title: '用户管理',
        icon: 'home'
    },
    category: {
        path: '/',
        key: 'category',
        title: '类别列表',
        icon: 'project'
    },
    addCategory: {
        path: '/',
        key: 'addCategory',
        title: '配置列表'
    },
    configList: {
        path: '/',
        key: 'configList',
        title: '配置列表'
    },
    addConfig: {
        path: '/',
        key: 'addConfig',
        title: '添加配置',
        icon: 'picCenter'
    }
}

class Index extends React.Component {
    state = {
        selectedKeys: ['home']
    }
    onCollapse = collapse => {
        this.setState({collapse})
    }
    onSelect = selectedKeys => {
        this.setState({
            selectedKeys: [selectedKeys.key]
        })

        let pathname;
        switch (selectedKeys.key) {
            case 'home':
                pathname = '/'
                break
            case 'category':
                pathname = '/category'
                break
            case 'addCategory':
                pathname = '/add-category'
                break
            case 'user':
                pathname = '/user'
                break
            case 'configList':
                pathname = '/config'
                break
            case 'AddConfig':
                pathname = '/add-config'
                break
            default:
                break
        }
        const {history, onMenuSelect} = this.props
        const menu = MENUS[selectedKeys.key]
        if (pathname) {
            history.push(pathname)
            onMenuSelect && onMenuSelect(pathname, menu.title)
        }
    }

    menu() {
        return <Menu theme='dark' defaultSelectedKeys={this.state.selectedKeys}
                     mode='inline'
                     onSelect={this.onSelect}
        >
            <Menu.Item key={MENUS.home.key} icon={<HomeOutlined/>}>
                {MENUS.home.title}
            </Menu.Item>
            <SubMenu key='category' title='类别管理' icon={<ProjectOutlined/>}>
                <Menu.Item key={MENUS.category.key} icon={<AppstoreAddOutlined/>}>
                    {MENUS.category.title}
                </Menu.Item>
                <Menu.Item key={MENUS.addCategory.key} icon={<PicCenterOutlined/>}>
                    {MENUS.addCategory.title}
                </Menu.Item>
            </SubMenu>
            <Menu.Item key={MENUS.user.key} icon={<TeamOutlined/>}>
                {MENUS.user.title}
            </Menu.Item>
            <SubMenu key='configCenter' title='配置中心' icon={<ProjectOutlined/>}>
                <Menu.Item key={MENUS.configList.key} icon={<AppstoreAddOutlined/>}>
                    {MENUS.configList.title}
                </Menu.Item>
                <Menu.Item key={MENUS.addConfig.key} icon={<PicCenterOutlined/>}>
                    {MENUS.addConfig.title}
                </Menu.Item>
            </SubMenu>
        </Menu>
    }

    render() {
        const {collapsed} = this.props
        const headerTitle = collapsed ? null : <div className='drawer-header-text-container'>
            <label className='drawer-header-text'>AUIU-CLOUD</label>
            <label className='drawer-header-text'>管理后台</label>
        </div>
        return (
            <Sider trigger collapsible collapsed={collapsed} onCollapse={this.collapsed}>
                <div className='drawer-header'>
                    <img className='drawer-logo' alt='logo'
                         src='https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLCCVsRJWyGjxWpva4hLoWxUbjZy6NExiaWHHWAbPUyMFzLCYShibg1v26C97zbpbZ8jWIfPxIOSd0Q/132'/>
                    {headerTitle}
                </div>
                {this.menu()}
            </Sider>
        )
    }

}

export default withRouter(Index)